<template>
    <div class="sett">
           <div class="m-secondary-navigator">
            <span @click="tosy">首页</span>
            /
            <span @click="tocart">购物车</span>
            /
            <span class="carts">确认页</span>
        </div>

        <div class="merchant-info">
                    <div v-for="(item,index1) in dingdan" class="store-item clearfix" :key="index1">
  <p class="company">
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <span>{{data.c_num}}</span>
      </li>
      <li class="dantotal">
        <span>￥{{data.c_total}}</span>
        <!-- <input v-model="" disabled="disabled"/> -->
      </li>
 
   </ul>
  </div>

  <div class="cal-store-box">
    <!-- <p>店铺总运费: <span v-html="calEveryFare(index1)"></span></p> -->
    <p>店铺商品总金额: <span>￥{{calEveryStore(index1)}}</span></p>
  </div>
</div>
<div class="zong clearfix">
  <div class="cal-box">
    <!-- <p>商品总运费:<span v-html="totalFare.toFixed(2)"></span></p> -->
    <p>商品总金额:<span>￥{{totalMoney}}</span></p>
  </div>
   
  
</div>
<div class="box-order-total">
                    <span>姓名:<i>{{formData.name}}</i></span>
                    <span>电话号:<i>{{formData.number}}</i></span>
                    <span>收货地址:<i>{{xxxaddress}}</i></span>
                    
                </div>
            </div>
        <div class="address">
                               <el-button type="text" @click="dialogFormVisible = true" v-if="isaddress">添加收获地址</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="formData" :rules="formRule" ref="formData">
     <el-form-item>
      <el-col :span="12">
        <el-form-item prop="name">
            <el-input type="text" v-model="formData.name" placeholder="姓名"></el-input>
        </el-form-item>
        </el-col>
         <el-col :span="12">
        <el-form-item prop="number" >
          <el-input v-model="formData.number" placeholder="电话号"></el-input>
        </el-form-item>
         </el-col>
         </el-form-item>





        <el-form-item required>
             <el-col :span="8">
                 <el-form-item porp="sheng">
              <el-select
      v-model="formData.sheng"
      @change="choseProvince"
      placeholder="省级地区">
      <el-option
        v-for="item in province"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
    </el-col>
     <el-col :span="8">
         <el-form-item prop="shi">
    <el-select
      v-model="formData.shi"
      @change="choseCity"
      placeholder="市级地区">
      <el-option
        v-for="item in shi1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
     </el-col>
      <el-col :span="8">
          <el-form-item prop="qu">
    <el-select
      v-model="formData.qu"
      @change="choseBlock"
      placeholder="区级地区">
      <el-option
        v-for="item in qu1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
      </el-col>
      </el-form-item>
      <el-form-item prop="address">
          <el-input type="textarea" placeholder="详细地址" v-model="formData.address"></el-input>
           </el-form-item>
        </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm(formData)">确 定</el-button>
     <div v-if="!isaddress">提交</div>
  </div>
</el-dialog>
            <div v-if="!isaddress" class="pay"  @click="pay">
     <button>提交</button>
 </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
    data()
    {
         var checkPhone = (rule, value, callback) => {
        if (!value) {
            this.ustatus=false;
          return callback(new Error('手机号不能为空'))
          
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        //   console.log(reg.test(value));
          if (reg.test(value)) {
              this.ustatus=true;
            callback();
          } else {
              this.ustatus=false;
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
        return{
        // dialogTableVisible: false,
         pp_id:[],
         num:[],
        dialogFormVisible: false,
         mapJson:'../static/json/map.json',
      province:'',
      dingdan:"",
    //   sheng: '',
    //   shi: '',
      shi1: [],
    //   qu: '',
      qu1: [],
      city:'',
      time:"",
       totalMoney : 0,
       xxxaddress:"",
       isaddress:true,
        datas:"",
        dec_id:"",
      block:'',
        formData:{
          name: '',
          number:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          sheng:'',
          shi:'',
          qu:'',
          address:'',
         
        },
       formRule:{
            name: [{required: true, message: '不能为空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
            number: [{required: true,validator: checkPhone, trigger: 'blur'}],
            sheng: [
            { required: true,trigger: 'change' }
          ],  
           shi: [
            { required: true,trigger: 'change' }
          ], 
           qu: [
            { required: true,trigger: 'change' }
          ], 
          address: [{required: true, message: '不能为空', trigger: 'blur'}],

        }
        }
    },
    computed: {
        ...mapState(["goodsobj"]),
    },
    created () {
       this.getCityData();
       console.log("youyisi",JSON.parse(localStorage.dingdan));
       this.dingdan=JSON.parse(localStorage.dingdan);
       let pp_id=[],num=[];
       for(let i=0;i<this.dingdan.length;i++)
       {
         for(let j=0;j<this.dingdan[i].list.length;j++)
         {
           if(this.dingdan[i].list[j].checked)
           {
             pp_id.push(this.dingdan[i].list[j].p_id);
           num.push(this.dingdan[i].list[j].c_num)
           }
           
         }
       }
        this.pp_id=[pp_id[0]],this.num=[num[0]];
       for(let n=1;n<pp_id.length;n++)
       {
       if(this.pp_id.indexOf(pp_id[n])==-1)
       {
         this.pp_id.push(pp_id[n]);
         this.num.push(num[n]);
       }
       else{
         this.num[this.pp_id.indexOf(pp_id[n])]+=num[n];
       }
       } 
       console.log("num",this.num)
       console.log("this.pp_id",this.pp_id)
       this.totalMoney=localStorage.total;
       if(localStorage.c_id)
       {
           this.dec_id="["+localStorage.c_id+"]";
      this.dec_id=JSON.parse(this.dec_id);
       }
       else{

       }
    
    },
    mounted () {
        // console.log(this.goodsobj);
    },
    methods: {
        tosy()
        {
            this.$router.push("/");
        },
        tocart()
        {
            this.$router.push("/cart");
        },
         pay(){
            this.time=(new Date()).getTime();
        //    localStorage.setItem(c_id,this.$route.query.tobuy);
        //    localStorage.setItem( cc_num,this.num1);
        // localStorage.cc_num=this.num1;
        // localStorage.cc_name=this.name;
        // localStorage.cc_price=this.price;
        // localStorage.cc_img=this.img;
        // localStorage.cc_time=this.time;
        //           this.$router.push({path:"/address",
        //   query:{
        //       c_id:this.$route.query.tobuy
        //   }});
        //    localStorage.setItem(cc_name,this.name);
        //    localStorage.setItem(cc_price,this.price);
        //    localStorage.setItem(cc_img,this.img);
        //    localStorage.setItem(cc_time,this.time);
          this.$confirm('点击后将会自动付款，您的姓名是：'+this.formData.name+'，电话号是：'+this.formData.number+'，地址是：”'+this.xxxaddress+'“，您确定继续吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
            
               this.$axios.post("http://127.0.0.1:8081/client/order",{
                  o_content:localStorage.dingdan,
                  u_id:sessionStorage.getItem("userid"),
                    o_number:this.formData.number,
                    o_name:this.formData.name,
                    o_address:this.xxxaddress,
                    dec_id:this.dec_id,
                    o_data:this.time,
                    pp_id:this.pp_id,
                    num:this.num
               }).then(res=>
               {
                 console.log(res)
                   if(res.data.status==1)
                   {
                    //   localStorage.removeItem('c_id');
                    //  localStorage.removeItem('dingdan');
                    //  localStorage.removeItem('total');
                     this.$message({
                      type: 'success',
                      message: res.data.msg
                    }); 
                      this.$router.push({path:"/order",
          query:{
              u_id:sessionStorage.getItem("userid")
          }});

                   }
                   else{
                     this.$message({
                      type: 'info',
                      message: res.data.msg
                    }); 
                   }
                //    if(res.data.status==1)
                //    {
                //         this.$message({
                //         type: 'success',
                //         message: res.data.msg
                //     });
                //    }
                //    else{
                //         this.$message({
                //         type: 'warning',
                //         message:res.data.msg
                //     });
                //    }
                 
               })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
        submitForm(formName) {

           console.log("formName",formName);
          this.xxxaddress=this.datas[(formName.sheng)]+this.datas[(formName.shi)]+this.datas[(formName.qu)]+formName.address;
          console.log(this.xxxaddress);
        this.$refs.formData.validate((valid) => {
          if (valid) {
              this.isaddress=false;
            this.dialogFormVisible = false;
            console.log(this.isaddress);
            console.log(this.xxxaddress);
            // console.log(valid);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      calEveryStore : function(index) {
      var everyStoreMoney = 0,
        list = this.dingdan[index]['list'];
      list.forEach(function(item, index, arr) {
        // if ( list[index]['checked'] ) { 
          everyStoreMoney += parseFloat(item.c_price) * parseFloat(item.c_num);
        // }
      });
      return everyStoreMoney;
    },
        getCityData:function(){
        var that = this
        this.$axios.get(this.mapJson).then(function(response){
          if (response.status==200) {
            var data = response.data
            that.province = []
            that.city = []
            that.block = []
            // 省市区数据分类
            for (var item in data) {
              if (item.match(/0000$/)) {//省
                that.province.push({id: item, value: data[item], children: []})
              } else if (item.match(/00$/)) {//市
                that.city.push({id: item, value: data[item], children: []})
              } else {//区
                that.block.push({id: item, value: data[item]})
              }
            }
            // 分类市级
            for (var index in that.province) {
              for (var index1 in that.city) {
                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                  that.province[index].children.push(that.city[index1])
                }
              }
            }
            // 分类区级
            for(var item1 in that.city) {
              for(var item2 in that.block) {
                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                  that.city[item1].children.push(that.block[item2])
                }
              }
            }
            that.datas=data
          }
          else{
            console.log(response.status)
          }
        }).catch(function(error){console.log(typeof+ error)})
      },
      // 选省
      choseProvince:function(e) {
        for (var index2 in this.province) {
          if (e === this.province[index2].id) {
            this.shi1 = this.province[index2].children
            this.shi = this.province[index2].children[0].value
            this.qu1 =this.province[index2].children[0].children
            this.qu = this.province[index2].children[0].children[0].value
            this.E = this.qu1[0].id
          }
        }
      },
      // 选市axios 
      choseCity:function(e) {
        for (var index3 in this.city) {
          if (e === this.city[index3].id) {
            this.qu1 = this.city[index3].children
            this.qu = this.city[index3].children[0].value
            this.E = this.qu1[0].id
            // console.log(this.E)
          }
        }
      },
      // 选区
      choseBlock:function(e) {
        this.E=e;
        // console.log(this.E)
      },
    }

}
</script>

<style>
.sett
{
    margin: 0 auto;
    width: 1080px;
}
.m-secondary-navigator{
    padding: 20px 0;
    width: 100%;
    display: block;
    float: none;
    background: transparent repeat 0 0 none;
    font-size: 14px;
}
.carts{
    color: #c00000;
}
.sett .el-form-item__content {
    margin-left: 30px !important;
}
.company_inner{
  margin-left: 20px;
}
.company{
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
  font-size: 14px;
  color: #666;
}
.goods-item ul{
  border-bottom: 1px solid #e7e7e7
}
.goods-item li{
  float: left;
  height: 72px;
  line-height: 72px;
  padding: 35px 0;
  text-align: center;
}
.goods-item .tupian{
  width: 120px;
  margin-left:10px;
  padding-top: 10px ;
}
/* .goods-item .tupian{
  height: 107px;
  padding: 0
} */
.tupian img{
  display: block;
  width: 100%;
}
.goods-item .yangshi{
  width: 320px;
  padding-left:20px;
  height: 142px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.goods-item .jiaprice{
  width: 210px;
}
.goods-item .jinum{
  width: 205px;
  position: relative;
  text-align: center
}
.goods-item .dantotal{
  width: 125px;
}
.goods-item .detele{
  width: 40px;
  font-size: 24px;
  color: #c00000;
}
.clearfix::after{
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;
  display: block;
}
.jinum input{
width: 80px;
height: 40px;
border: 1px #666 solid;
line-height: 40px;
box-sizing: border-box;
text-align: center;
}
.cal-store-box{
  float: right;
  height: 40px;
  color:#999;
  line-height: 40px;
}
.cal-store-box span,.zong .cal-box span{
  color:#c00000;
  font-weight: bold
}
.zong .cal-box{
  color:#000
}
.zong .cal-box{
  float:right;
}
.zong{
 margin: 30px 0;
 /* padding-right: 20px; */
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  background: #fafafa;
  width: 1080px;
}
.address{
  margin: 30px 0;
  float: right;
}
.box-order-total{
    width: 100%;
    text-align: right;
    line-height: 40px;
    border-bottom: 15px;
}
.box-order-total span{
  margin: 20px;
}
.box-order-total span i{
  color: #c00000;
}
.pay{
     /* float: right;
    display: block;
    height: 40px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px; */
    /* text-align: center; */
    width: 100%;
    text-align: right;
    line-height: 40px;
    border-bottom: 15px; 
    margin-top: 10px;
}
.pay button{
    width: 150px;
    text-align: center;
    height: 40px;
    border: none;
    background: orange;
    line-height: 40px;
    color: #fff;
    letter-spacing: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;

}
</style>
